<!--
 * 组织/职务 抽屉
 *
 * @author tqfeiyang
 * @since 2024-09-19
-->
<template>
  <a-drawer
      :title="formData.employeeId ? '编辑' : '新建'"
      :open="visibleFlag"
      size="large"
      :footerStyle="{ textAlign: 'right' }"
      @close="onClose"
      :destroyOnClose="true"
  >

    <a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
        <a-form-item label="部门id" name="departmentId">
            <a-input v-model:value="formData.departmentId" placeholder="请输入部门id" />
        </a-form-item>
        <a-form-item label="名称" name="name">
            <a-input v-model:value="formData.name" placeholder="请输入名称" />
        </a-form-item>
        <a-form-item label="备注" name="remark">
            <a-input v-model:value="formData.remark" placeholder="请输入备注" />
        </a-form-item>
    </a-form>

    <template #extra>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script setup>
  import { reactive, ref, nextTick } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { deepCopy } from '/@/lib/utils';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { employeeApi } from '/@/api/business/organization/employee-api';

  const emits = defineEmits(['reloadList']);

  // ----------------- 显示/关闭 ------------------

  const visibleFlag = ref(false);

  function showModal(employeeId) {
    Object.assign(formData, defaultFormData);

    if (employeeId) {
      getEmployeeInfo(employeeId);
    }

    visibleFlag.value = true;

    nextTick(() => {
      formRef.value.clearValidate();
    });
  }

  function onClose() {
    visibleFlag.value = false;
  }

  // -------------------- 表单 --------------------

  const formRef = ref();

  const defaultFormData = {
    employeeId: undefined, //员工id
    departmentId: undefined, //部门id
    name: undefined, //名称
    remark: undefined, //备注
  }

  const formData = reactive({ ...defaultFormData });

  const formRules = {
        departmentId: [{ required: true, message: '请输入部门id' }],
        name: [{ required: true, message: '请输入名称' }],
        remark: [{ required: true, message: '请输入备注' }],
  };

  async function onSubmit() {
    try {
      await formRef.value.validateFields()
      updateEmployee()
    } catch (err) {
      console.log(err)
      message.error('参数验证错误，请仔细填写表单数据!')
    }
  }

  async function getEmployeeInfo(employeeId) {
    try {
      SmartLoading.show();
      const result = await employeeApi.getEmployeeInfo(employeeId);
      Object.assign(formData, result.data);
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  async function updateEmployee() {
    try {
      SmartLoading.show();
      if (formData.employeeId) {
        await employeeApi.updateEmployee(formData.employeeId, formData);
      } else {
        await employeeApi.createEmployee(formData);
      }
      message.success('保存成功');
      emits('reloadList');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  // --------------- 暴露的方法和内容 --------------

  defineExpose({
    showModal,
  });
</script>

<style lang="less" scoped>
</style>
